import React, { Component } from 'react';
import { Container, Box, Heading, Card, Image, Text, SearchField, Icon } from 'gestalt';
import './App.css';
import { Link } from 'react-router-dom';
import Loader from '../components/Loader';
import Strapi from 'strapi-sdk-javascript/build/main';
const apiUrl = process.env.API_URL || 'http://localhost:1337';
const strapi = new Strapi(apiUrl);

class App extends Component {
  state = {
    brands: [],
    searchValue: '',
    loadingBrands: true
  }

  async componentDidMount() {
    try {
      const res = await strapi.request('POST', '/graphql', {
        data: {
          query: `query {
            brands {
              id
              name
              description
              createdAt
              image {
                url
              }
            }
          }`
        }
      });
      const { data = {} } = res;
      this.setState({ brands: data.brands, loadingBrands: false });
    } catch (err) {
      console.error(err);
      this.setState({ loadingBrands: false });
    }
  }

  handleChange = ({ value: searchValue }) => {
    this.setState({ searchValue })
  }

  filteredBrands = ({ searchValue, brands }) => {
    return brands.filter(brand => {
      return brand.name.toLowerCase().includes(searchValue.toLowerCase()) ||
        brand.description.toLowerCase().includes(searchValue.toLowerCase());
    });
  }

  render() {
    const { searchValue, loadingBrands } = this.state;
    return (
      <Container>
        {/* Brands Search Feild */}
        <Box
          display="flex"
          justifyContent="center"
          marginTop={4}
        >
          <SearchField
            id="searchField"
            accessibilityLabel="Brands Search Field"
            onChange={this.handleChange}
            value={searchValue}
            placeholder="Search Brands"
          />
          <Box margin={3}>
            <Icon 
              icon="filter"
              color={ searchValue ? "orange" : "gray" }
              size={24}
              accessibilityLabel="Filter"
            />
          </Box>
        </Box>

        {/* Brands Scction */}
        <Box
          display="flex"
          justifyContent="center"
          marginBottom={2}
        >
          {/* Brands Header */}
          <Heading color="midnight" size="md">
            Brew Brands
          </Heading>
        </Box>
        {/* brands */}
        <Box
          dangerouslySetInlineStyle={{
            __style: {
              backgroundColor: '#d6c8ec'
            }
          }}
          shape="rounded"
          display="flex"
          wrap
          justifyContent="around"
        >
          {this.filteredBrands(this.state).map(brand => (
            <Box
              paddingY={4}
              margin={2}
              width={220}
              key={brand.id}
            >
              <Card
                image={
                  <Box height={200} width={200}>
                    <Image fit="cover" alt="brand" naturalHeight={1} naturalWidth={1} src={`${apiUrl}${brand.image.url}`}></Image>
                  </Box>
                }
              >
                <Box
                  display="flex"
                  alignItems="center"
                  justifyContent="center"
                  direction="column"
                >
                  <Text blod text size="xl">{brand.name}</Text>
                  <Text text size="xl">{brand.description}</Text>
                  <Text blod text size="xl">
                    <Link to={`/brand/${brand.id}`}>See Brews</Link>
                  </Text>
                </Box>
              </Card>
            </Box>
          ))}
        </Box>
        {/* <Spinner 
          show={loadingBrands}
          accessibilityLabel="Loading Spinner"
        /> */}
        <Loader show={loadingBrands} />
      </Container>
    );
  }
}

export default App;
